<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="referrer" content="no-referrer">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>网络收藏夹|瞬间</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="layui/css/layui.css">
    <style type="text/css">


			.home-icon {
				width: 30px;
				height: 30px;
				margin-top: 16px;
				margin-left: 20px;
				cursor: pointer;
			}

			.header {
			    position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 60px;
                background-color: #0A0E11;
			}

			.center {
			    position: fixed;
                width: 100%;
                top: 60px;
                bottom: 44px;
                overflow: auto;
			}

			.footer {
			    position: fixed;
                bottom: 0;
                width: 100%;
                text-align: center;
                height: 44px;
                line-height: 44px;
                background-color: #f5f7fa;
			}

			#logout {
                margin-top: 20px;
                margin-right: 20px;
                float: right;
			}

			#addMoment {
			    margin-top: 16px;
                margin-left: 30px;
			}

			.main {
                padding: 15px;
			}

			.time {
				font-size: 14px !important;
				color: #999 !important;
			}

			.moment {
			    cursor: pointer;
			}

			.content {
			    max-height: 200px;
			    overflow: hidden;
			}

			.content-mask {
			    color: #1e9fff;
			    cursor: pointer;
			    display: none;
			}

			.action {
				margin-top: 6px;
				line-height: 30px;
			}

			.action .layui-icon {
			    margin-right: 10px;
			    font-size: 18px;
			}

			.action .layui-icon:hover {
			    color: #1e9fff;
			}

			.set-top {
				height: 22px;
				line-height: 22px;
				margin-right: 4px;
				font-size: 14px;
				cursor: pointer;
			}

			.search-input {
                z-index: 999;
                position: absolute;
                top: 16px;
                right: 70px;
                width: 100px;
                height: 30px;
                transition: width .3s ease;
            }

            .search-input input {
                height: 100%;
                font-size: 12px;
                border: none;
                background-color: #161a1d;
                color: #b2b2b2;
                padding-left: 26px;
                padding-right: 26px;
            }

            .search-input .search-close {
                position: absolute;
                top: 4px;
                right: 4px;
                font-size: 20px;
                color: #666;
                display: none;
                cursor: pointer;
            }

            .search-input .search-icon {
                position: absolute;
                top: 8px;
                left: 6px;
                font-size: 14px;
                color: #999;
                cursor: pointer;
            }
		</style>
</head>
<body>
<div class="header">
    <a href="index.html"><img class="home-icon" src="images/home.svg" alt=""></a>
    <button id="addMoment" type="button" class="layui-btn layui-btn-sm">发布瞬间</button>
    <div class="search-input">
        <i id="search_icon" class="layui-icon layui-icon-search search-icon"></i>
        <input type="text" id="search_text" name="search_text" placeholder="快速搜索..." autocomplete="off"
               class="layui-input">
        <i id="search_close" class="layui-icon layui-icon-close-fill search-close layui-anim layui-anim-fadein" style="display:none;"></i>
    </div>
    <button class="layui-btn layui-btn-xs" type="button" id="logout">退出</button>
</div>
<div class="center" id="center">
    <div class="main">
        <div class="layui-timeline" id="topMoment"></div>
        <div id="momentDiv"><div class="layui-timeline" id="momentList"></div></div>
        <div class="layui-timeline" id="searchList"></div>
        <div id="noData" style="text-align: center;margin-top: 40px;display: none;">
            <img src="images/nodata-topic.svg" alt="">
            <p style="color: #666;margin-top: 10px;">您还没有瞬间，<a href="javascript:document.getElementById('addMoment').click();" style="color: #009688;">立即发布</a> ...</p>
        </div>
    </div>
</div>
<div class="footer">
    © 2020 网络收藏夹 || 网络收藏夹版权所有
</div>
<div id="editDiv"></div>
<script src="layui/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="layui/layui.js"></script>
<script>
    layui.use(['layer','flow','util'], function() {
        var layer = layui.layer;
        var flow = layui.flow;
        var util = layui.util;

        // 加载动画
        layer.load();

        // 加载数据
        flow.load({
            elem: '#momentList'
            ,scrollElem: '#center'
            ,mb: 400
            ,end: ' '
            ,done: function(page, next){
              var lis = [];
              $.ajax({
                    type: "GET",
                    url: "moment/list",
                    data: {"pageNum": page,"pageSize": 20},
                    dataType: "json",
                    headers:{"Authorization": "Bearer "+ localStorage.getItem("login_user_token")},
                    success: function (result) {
                        if(page == 1){
                            layer.closeAll('loading');
                        }
                        if (result.code == 0) {
                            $.each(result.data.list, function(index, item){
                                var html = '';
                                html += '<div class="layui-timeline-item" data-id="' + item.id + '">';
                                html += '   <i class="layui-icon layui-timeline-axis">&#xe63f;</i>';
                                html += '   <div class="layui-timeline-content layui-text">';
                                html += '       <p class="layui-timeline-title time">' + item.createTime + '</p>';
                                html += '       <div class="moment">';
                                html += '           <div class="content">'+ item.content +'</div>';
                                html += '           <div class="content-mask">点击查看全文</div>';
                                html += '           <div class="layui-anim layui-anim-fadein action" data-id="' + item.id + '">';
                                html += '               <i class="layui-icon layui-icon-flag"></i>';
                                html += '               <i class="layui-icon layui-icon-edit"></i>';
                                html += '               <i class="layui-icon layui-icon-delete"></i>';
                                html += '           </div>';
                                html += '       </div>';
                                html += '    </div>';
                                html += '</div>';

                                lis.push(html);
                            });
                            next(lis.join(''), page < result.data.pages);
                            hideBigText("#momentList");
                        }
                    }
              });
            }
        });

        // jQuery全局拦截器
        $(document).ajaxSuccess(function(event,xhr,options){
            var result = xhr.responseJSON;
            if(result != undefined && result.code == "401"){
                window.location.href= "login.html";
            }
        });

        // 固定块
        util.fixbar({
            top: true
            ,scrollElem: '#center'
            ,bgcolor: '#393D49'
            ,css: {right: 50, bottom: 60}
        });

        // 点击空白关闭
        $(document).on("click", function(e) {
            var _conss = $('.search-input');//点击的容器范围
            if (!_conss.is(e.target) && _conss.has(e.target).length === 0) {
                $("#search_close").hide();
                $("#search_text").parent().css({"width":"100px"});
            }
        });

        // 关闭搜索
        $("#search_close").click(function () {
            changeIndexMode();
            $(this).hide();
            $("#search_text").val("").parent().css({"width":"100px"});
        });

        $("#search_text").on("keydown", function(event){
            if(event.key === "Enter"){
                searchText();
            }
        }).on("focus", function () {
           $("#search_close").show();
           $(this).parent().css({"width":"200px"});
        });

        $("#search_icon").click(function(){
            searchText();
        });

        // 点击显示更多
        $(document).on('click', '.content-mask', function(e){
            var that = $(e.currentTarget);
            that.hide().prev().css("max-height", "none");
        });

        // 隐藏大文本
        window.hideBigText = function(containerId){
            $(containerId + " .content").each(function(){
                var height = parseInt($(this).height());
                var maxHeight = parseInt($(this).css("max-height"));
                if(maxHeight == 200 && height == 200){
                    $(this).next().show();
                }
            });
        };

        window.changeIndexMode = function(){
            $("#topMoment").show();
            $("#momentDiv").show();
            $("#searchList").hide();
            $("#noData").hide();
        };
        window.changeSearchMode = function(){
            $("#noData").hide();
            $("#topMoment").hide();
            $("#momentDiv").hide();
            $("#searchList").show();
        };

        window.searchText = function(){
            var text = $("#search_text").val().trim();
            if (text == "") { //退出搜索模式
                $("#search_close").click();
            } else {
                changeSearchMode();
                // 加载数据
                layer.load();
                $.ajax({
                    type: "GET",
                    url: "moment/search",
                    data: {"text": text},
                    dataType: "json",
                    headers:{"Authorization": "Bearer "+ localStorage.getItem("login_user_token")},
                    success: function (result) {
                        layer.closeAll('loading');
                        $("#searchList").empty();
                        if (result.code == 0 && result.data.length > 0) {
                            var html = '';
                            $.each(result.data, function(index, item){
                                html += '<div class="layui-timeline-item" data-id="' + item.id + '">';
                                html += '   <i class="layui-icon layui-timeline-axis">&#xe63f;</i>';
                                html += '   <div class="layui-timeline-content layui-text">';
                                html += '       <p class="layui-timeline-title time">' + item.createTime + '</p>';
                                html += '       <div class="moment">';
                                html += '           <div class="content">'+ item.content +'</div>';
                                html += '           <div class="content-mask">点击查看全文</div>';
                                html += '           <div class="layui-anim layui-anim-fadein action" data-id="' + item.id + '">';
                                html += '               <i class="layui-icon layui-icon-flag"></i>';
                                html += '               <i class="layui-icon layui-icon-edit"></i>';
                                html += '               <i class="layui-icon layui-icon-delete"></i>';
                                html += '           </div>';
                                html += '       </div>';
                                html += '    </div>';
                                html += '</div>';
                            });
                            $("#searchList").append(html);
                            $("#noData").hide();
                            hideBigText("#searchList");
                        }else{
                            $("#noData").show();
                        }
                    }
              });
            }
        };

        // 编辑
        $(document).on('click', '.action .layui-icon-edit', function(e) {
            var id = $(e.target).parent().attr("data-id");
            $.ajax({
                type: "GET",
                url: "moment/" + id,
                dataType: "json",
                headers:{"Authorization": "Bearer "+ localStorage.getItem("login_user_token")},
                success: function (result) {
                    if (result.code == 0) {
                        var width = parseInt($(window).width()) * 0.9;
                        width = (width >= 800? 800 : width) + 'px';
                        layer.open({
                          id:"wangEditor",
                          type: 2,
                          content: 'wangEditor.html#' + id,
                          area: [width, '500px'],
                          btn: ['确认', '取消'],
                          yes: function(index, layero){
                            var frameId = $(layero).find("iframe").attr('id');
                            var subWindow = document.getElementById(frameId).contentWindow;
                            var html = subWindow.editor.txt.html();
                            var momentId = subWindow.momentId;
                            var text = subWindow.editor.txt.text();
                            if(html && text){
                                if(text.length > 20000){
                                    layer.msg('最多输入20000个字符');
                                    return false;
                                }
                                // 保存数据
                                layer.load();
                                $.ajax({
                                    type: "POST",
                                    url: "moment/update",
                                    data: JSON.stringify({"content": html,"id": momentId, "text": text}),
                                    contentType: 'application/json;charset=utf-8',
                                    dataType: "json",
                                    headers:{"Authorization": "Bearer "+ localStorage.getItem("login_user_token")},
                                    success: function (result) {
                                        layer.closeAll('loading');
                                        if (result.code == 0) {
                                            layer.msg('保存成功', {icon: 6});
                                            layer.close(index);
                                            window.location.reload();
                                        } else {
                                            layer.msg('保存失败', {icon: 5});
                                        }
                                    }
                                });
                            }else{
                                layer.msg("内容不能为空");
                            }
                          }
                        });
                    }
                }
            });
        });

        $(document).on("keydown", function(event){
            if(event.ctrlKey && event.key === "f"){
                $("#search_text").focus();
                // 阻止默认浏览器动作(W3C)
                var e = event;
                if ( e && e.preventDefault )
                    e.preventDefault();
                // IE中阻止函数器默认动作的方式
                else
                    window.event.returnValue = false;
                return false;
            }
        });

        // 置顶
        $(document).on('click', '.action .layui-icon-flag', function(e) {
            var id = $(e.target).parent().attr("data-id");
            $.ajax({
                type: "POST",
                url: "moment/top/" + id,
                dataType: "json",
                headers:{"Authorization": "Bearer "+ localStorage.getItem("login_user_token")},
                success: function (result) {
                    if (result.code == 0) {
                        layer.msg('操作成功', {icon: 6});
                        loadTopMoment();
                    }
                }
            });
        });

        // 删除
        $(document).on('click', '.action .layui-icon-delete', function(e) {
            layer.confirm('确认删除吗?', function(index) {
                var id = $(e.target).parent().attr("data-id");
                $.ajax({
                    type: "GET",
                    url: "moment/delete/" + id,
                    dataType: "json",
                    headers:{"Authorization": "Bearer "+ localStorage.getItem("login_user_token")},
                    success: function (result) {
                        if (result.code == 0) {
                            window.location.reload();
                        }
                    }
                });
                layer.close(index);
            });
        });

        // 取消置顶
        $(document).on('click','#topMoment .set-top',function(e){
            layer.confirm('确认取消置顶吗?', function(index) {
                var id = $(e.target).attr("data-id");
                $.ajax({
                    type: "DELETE",
                    url: "moment/top/" + id ,
                    dataType: "json",
                    headers:{"Authorization": "Bearer "+ localStorage.getItem("login_user_token")},
                    success: function (result) {
                        if (result.code == 0) {
                            loadTopMoment();
                        }
                    }
                });
                layer.close(index);
            });
        });

        // 发布
        $("#addMoment").click(function() {
            var width = parseInt($(window).width()) * 0.9;
            width = (width >= 800? 800 : width) + 'px';
            layer.open({
              id:"wangEditor",
              type: 2,
              title: "发布瞬间",
              content: 'wangEditor.html',
              area: [width,'500px'],
              btn: ['确认', '取消'],
              yes: function(index, layero){
                var frameId = $(layero).find("iframe").attr('id');
                var subWindow = document.getElementById(frameId).contentWindow;
                var html = subWindow.editor.txt.html();
                var text = subWindow.editor.txt.text();
                if(html && text){
                    if(text.length > 20000){
                        layer.msg('最多输入20000个字符');
                        return false;
                    }
                    // 保存数据
                    layer.load();
                    $.ajax({
                        type: "POST",
                        url: "moment",
                        data: JSON.stringify({"content": html, "text": text}),
                        contentType: 'application/json;charset=utf-8',
                        dataType: "json",
                        headers:{"Authorization": "Bearer "+ localStorage.getItem("login_user_token")},
                        success: function (result) {
                            layer.closeAll('loading');
                            if (result.code == 0) {
                                layer.msg('保存成功', {icon: 6});
                                layer.close(index);
                                window.location.reload();
                            } else {
                                layer.msg('保存失败', {icon: 5});
                            }
                        }
                    });
                }else{
                    layer.msg("内容不能为空");
                }
              }
            });
        });

        // 登出
        $("#logout").click(function () {
            layer.confirm('确认退出系统吗？', function(index){
                layer.close(index);

                localStorage.clear();
                window.location.href = "login.html";
            });
        });

        window.loadTopMoment = function(){
            $("#topMoment").empty();
            $.ajax({
                type: "GET",
                url: "moment/top",
                dataType: "json",
                headers:{"Authorization": "Bearer "+ localStorage.getItem("login_user_token")},
                success: function (result) {
                    if (result.code == 0 && result.data) {
                        var moment = result.data;
                        var html = '';
                        html += '<div class="layui-timeline-item">';
                        html += '   <i class="layui-icon layui-timeline-axis" style="color: #ffb800;font-size: 22px;">&#xe658;</i>';
                        html += '   <div class="layui-timeline-content layui-text">';
                        html += '       <p class="layui-timeline-title time"><span class="layui-badge layui-bg-cyan set-top" data-id="' + moment.id + '">置顶</span>' + moment.createTime + '</p>';
                        html += '       <div class="moment">';
                        html += '           <div class="content">'+ moment.content +'</div>';
                        html += '           <div class="content-mask">点击查看全文</div>';
                        html += '       </div>';
                        html += '    </div>';
                        html += '</div>';
                        $("#topMoment").append(html);
                        hideBigText("#topMoment");
                    }
                }
            });
        };

        $(function(){
            loadTopMoment();
            // 暂无数据
            $.ajax({
                type: "GET",
                url: "moment/count",
                dataType: "json",
                headers:{"Authorization": "Bearer "+ localStorage.getItem("login_user_token")},
                success: function (result) {
                    if (result.code == 0 && result.data == 0) {
                        $("#noData").show();
                    }else{
                        $("#noData").hide();
                    }
                }
            });

        });
    });
</script>
</body>
</html>
